<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid black;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Helper function to draw an arrow
        function drawArrow(ctx, x1, y1, x2, y2) {
            const headlen = 10;
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper function to draw a double arrow
        function drawDoubleArrow(ctx, x1, y1, x2, y2) {
            drawArrow(ctx, x1, y1, x2, y2);
            drawArrow(ctx, x2, y2, x1, y1);
        }

        // Helper function to draw a spring
        function drawSpring(ctx, x1, y1, length, coils, radius) {
            const coilWidth = length / coils;
            let x = x1;
            ctx.beginPath();
            // Start with a small straight segment
            ctx.moveTo(x1 - 5, y1);
            ctx.lineTo(x1, y1);
            // Draw the coils
            for (let i = 0; i < coils; i++) {
                ctx.arc(x + coilWidth / 2, y1, coilWidth / 2, Math.PI, 0, false);
                x += coilWidth;
            }
            // End with a small straight segment
            ctx.lineTo(x + 5, y1);
            ctx.stroke();
        }

        // --- Ground ---
        const y_ground = 400;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(0, y_ground);
        ctx.lineTo(canvas.width, y_ground);
        ctx.stroke();
        // Hatches for ground
        for (let i = 20; i < canvas.width; i += 20) {
            ctx.beginPath();
            ctx.moveTo(i, y_ground);
            ctx.lineTo(i - 10, y_ground + 10);
            ctx.stroke();
        }

        // --- Container AB ---
        const containerLeftX = 50;
        const containerRightX = 750;
        const containerWallTopY = 250;
        const containerBottomY = 398;
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(containerLeftX, containerWallTopY);
        ctx.lineTo(containerLeftX, containerBottomY);
        ctx.lineTo(containerRightX, containerBottomY);
        ctx.lineTo(containerRightX, containerWallTopY);
        ctx.stroke();
        
        // Labels A and B
        ctx.font = '24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('A', containerLeftX, containerWallTopY - 5);
        ctx.fillText('B', containerRightX, containerWallTopY - 5);

        // Mass label for container
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'right';
        ctx.fillText('m', containerLeftX - 10, 330);

        // --- Inner Plate ---
        const plateLength = 240; // 3l
        const plateHeight = 30;
        const plateLeftX = 150;
        const plateTopY = containerBottomY - plateHeight;
        ctx.lineWidth = 3;
        ctx.strokeRect(plateLeftX, plateTopY, plateLength, plateHeight);
        
        // Labels for inner plate
        ctx.textAlign = 'center';
        ctx.font = 'italic 20px Times New Roman';
        const plateCenterX = plateLeftX + plateLength / 2;
        ctx.fillText('m', plateCenterX, plateTopY + 15);
        ctx.fillText('3l', plateCenterX, plateTopY + 30);

        // --- lx arrow and label ---
        ctx.lineWidth = 1.5;
        const lx_y = 350;
        drawDoubleArrow(ctx, containerLeftX, lx_y, plateLeftX, lx_y);
        const lx_x_label = (containerLeftX + plateLeftX) / 2;
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('l', lx_x_label - 4, lx_y - 5);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('x', lx_x_label + 5, lx_y - 3);

        // --- Spring ---
        const springNaturalLength = 160; // 2l
        const springY = plateTopY + plateHeight / 2;
        ctx.lineWidth = 1.5;
        drawSpring(ctx, plateLeftX, springY, springNaturalLength, 8, 10);

        // Label for spring
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('k, 2l', plateLeftX + springNaturalLength / 2, springY - 15);

        // --- Block ---
        const blockWidth = 40;
        const blockHeight = 40;
        const blockX = 500;
        const blockY = plateTopY - blockHeight;
        ctx.lineWidth = 3;
        ctx.strokeRect(blockX, blockY, blockWidth, blockHeight);

        // Label for block
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('m', blockX + blockWidth / 2, blockY - 5);

        // --- Velocity v0 arrow ---
        ctx.lineWidth = 2;
        const v0_y = blockY + blockHeight / 2;
        const v0_startX = blockX - 20;
        const v0_endX = v0_startX - 80;
        drawArrow(ctx, v0_startX, v0_y, v0_endX, v0_y);

        // Label for v0
        const v0_x_label = (v0_startX + v0_endX) / 2;
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('v', v0_x_label - 4, v0_y - 8);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('0', v0_x_label + 5, v0_y - 6);

    </script>
</body>
</html>